import React from 'react';
import ReactDOM from 'react-dom';
// react中的数据来源 只有两个 状态（state 私有的）    属性（props 传进来的）
//  对比vue                  data                    props

class App extends React.Component {
    constructor() {
        super();
        this.state = {
          // 组件的私有数据
          name:"珠峰",
          time:new Date().toLocaleString()
        }
    }
    componentDidMount(){
      // 类似于 vue的 mounted 钩子函数
      setInterval(() => {
        this.setState({
          // 在react中 更新数据 react不会主动更新视图的 想更新新视图 必须主动触发 setState，这是就会触发render函数
          time:new Date().toLocaleString()
        })
        console.log(this.state.time)
        // this.state.time = new Date().toLocaleString()
        // this.setState({})
      }, 1000);
      

    }
    render() {
        console.log(this.props)
        console.log(this.state)
        // this.state.time = new Date().toLocaleString()
        // setInterval(() => {
        //   this.state.time = new Date().toLocaleString();
        //   console.log(this.state.time)
        // }, 1000);
        return <div className=''>
          当前时间是{this.state.time}
        </div>;
    }
}
// setInterval(() => {
  ReactDOM.render(<App className='box'/>,document.getElementById('root'))
// }, 1000);
